<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { gamesApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
  import { ElMessageBox } from 'element-plus';
  import Pagination from "@/components/Pagination/index.vue";
  import rewardForm from './rewardForm.vue';
  const $emit = defineEmits(['updateList'])
  const rewardFormRef = ref();
  const action = reactive({
    dialogTableVisible:false,
    title:'',
    total:0,
    rankingType:[] as Array<any>,
    list:[] as Array<any>,
  })
  const rewardTypeArr = [
    { type: 1, text: "头像框" },
    { type: 2, text: "座驾" },
    { type: 3, text: "礼物" },
    { type: 4, text: "气泡" },
    { type: 5, text: "进场特效", },
    { type: 6, text: "金豆", },
    { type: 7, text: "钻石", },
  ]
  const receiveTypeArr = [
    { type: 1, text:"自动下发" },
    { type: 2, text:"页面领取" },
  ]
  const dayTypeArr = [
    { type: 1, text:"日榜" },
    { type: 2, text:"总榜" },
  ]
  const listQuery = reactive({
    page:1,
    limit:20,
    custom_id:'',
    rank_id:''
  })
  const handleForm = (row:any = {rank_id:listQuery.rank_id})=>{
    rewardFormRef.value.openDialog({
      ...row,
      rewardTypeArr,
      receiveTypeArr,
      dayTypeArr
    })
  }
  const handleDelete = (row:any = {})=>{
    const { id=0, game_name='', rank_type_text='', data_name='' } = row
    if(!id) return ToastWarning('缺少id')
    ElMessageBox.confirm(`确定删除活动：${game_name}-${rank_type_text}-${data_name}奖励吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const loading = Toastloading();
      gamesApi.customRankRewardDel({reward_id:id}).then(()=>{
        ToastSuccess("删除成功!");
        loading.close();
        getList();
      }).catch(()=>{
        loading.close();
      })
    }).catch(() => {});
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await gamesApi.customRankRewardList(listQuery)
    loading.close()
    const { data=[], total=0 } = res.data
    action.total = total
    action.list = data.map((res:any)=>{
      const { rank_type=0, receive_type=0, reward_type=0, day_type=0 } = res
      return {
        rank_type_text:action.rankingType.find(res=>res.type == rank_type)?.text || rank_type,
        reward_type_text:rewardTypeArr.find(res=>res.type == reward_type)?.text || reward_type,
        receive_type_text:receiveTypeArr.find(res=>res.type == receive_type)?.text || receive_type,
        day_type_text:dayTypeArr.find(res=>res.type == day_type)?.text || day_type,
        ...res
      }
    })
  }
  const openDialog = async(query:any={})=> {
    const {
      id:rank_id=0, custom_id, rankingType=[],
      game_name='', rank_type_text=''
    } = query
    if(!custom_id) return ToastWarning('缺少活动ID')
    listQuery.rank_id = rank_id
    listQuery.custom_id = custom_id
    const loading = Toastloading()
    action.rankingType = rankingType
    await getList()
    loading.close()
    action.dialogTableVisible = true
    action.title = rank_id?`编辑榜单：${game_name}-${rank_type_text}`:'创建榜单'
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog"
      v-model="action.dialogTableVisible"
      width="60%"
      :title="action.title">
      <el-button class="xm-mb10 xm-mrAuto" type="primary" @click="handleForm()">新增奖励</el-button>
      <el-table
        class="xm-main xm-TableCenter"
        :data="action.list"
        border>
        <el-table-column width="80" prop="id" label="奖励ID" />
        <el-table-column width="100" prop="rank_num" label="榜单名次" />
        <el-table-column width="120" prop="rank_type_text" label="奖励榜单" />
        <el-table-column width="120" prop="reward_type_text" label="奖励类型" />
        <el-table-column width="120" prop="day_type_text" label="榜单结算类型" />
        <el-table-column min-width="80" prop="data_name" label="奖励名称" />
        <el-table-column min-width="80" prop="data_num" label="奖励数量" />
        <el-table-column min-width="80" prop="receive_type_text" label="奖励方式" />
        <el-table-column width="180" fixed=right label="操作">
          <template #default="scope">
            <el-button type="primary" @click="handleForm(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    </el-dialog>
    <rewardForm ref="rewardFormRef" @update-list="getList" />
  </div>
</template>